<!DOCTYPE html>
<!--  -->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画</title>
    <base target="_blank">
</head>
<style>
*{
    padding: 0;
    margin: 0;
    list-style: none;
}
.donghua{
    width: 100px;
    height: 100px;
    border-radius: 50%;
border: 4px solid red;
margin-top:  100px;
animation: mao 6s infinite;
position: relative;

}
.donghua img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
@keyframes mao{
    0%{ transform: rotate(0deg);left: -150px; opacity: 0;}
    20%{transform: rotate(120deg);  left: 100px; }
    30%{transform: rotate(240deg); left: 250px;}
    50%{transform: rotate(360deg); left: 500px; opacity: 1;}
    70%{transform: rotate(240deg); left: 250px;}
    80%{transform: rotate(120deg);left: 100px;}
    100%{transform: rotate(0deg); left: -150px; opacity: 0;}
}

.tu{
width: 300px;
height: 150px;

overflow: hidden;
border: 1px solid #333;
margin: 50px auto;
}
.tu ul{
    width: 500%;
    height: 100%;
    animation: tu 6s infinite;
}
.tu ul li{
width: 20%;
height: 100%;
float: left;
   
}
.tu ul li img{
    width: 100%;
height: 100%;
}
@keyframes tu{
0%{transform: translate(0);}
25%{transform: translate(-20%);}
50%{transform: translate(-40%);}
75%{transform: translate(-60%);}
100%{transform: translate(-80%);}
}

</style>

<body>
<div class="donghua">
    <img src="./images/keaimao.jpg" alt="">
</div>
<div class="tu">
    <ul>
        <li>
            <img src="./images/pic2.jpg" alt="">
        </li>
        <li>
            <img src="./images/pic3.jpg" alt="">
        </li>
        <li>
            <img src="./images/pic4.jpg" alt="">
        </li>
        <li>
            <img src="./images/pic5.jpg" alt="">
        </li>
        <li>
            <img src="./images/pic6.jpg" alt="">
        </li>
    </ul>
</div>
</body>

</html>